<template>
  <div class="app-container hk-flex-column">
    <search-form
      :data="queryParams"
      :field-list="filterInfo.fieldList"
      :list-type-info="dictList"
      @handleSearch="handleQuery"
      @handleReset="resetQuery"
      @handleEvent="handleEvent">
      <template #filter-moment>
        <div class="searchTime">
          <el-radio-group v-model="searchTime" size="small" @change="changeRadio">
            <el-radio-button label="近一日" />
            <el-radio-button label="近一周" />
            <el-radio-button label="近一月" />
          </el-radio-group>
          <el-date-picker
            v-model="searchDate"
            style="width: 300px"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeDate" />
        </div>
      </template>
    </search-form>
    <div class="all-group">
      <span>全部班组：</span>
      <el-button
        v-for="item in groups"
        :key="item.id"
        size="small"
        :style="{ color: item.id !== '0' ? '#fff' : '', background: item.groupLogo }"
        :class="item.id == choseId ? 'active-btn' : ''"
        @click="choseGroup(item)"
        @dblclick.native="edit(item)"
        >{{ item.groupName }}</el-button
      >
    </div>
    <el-row>
      <el-button type="primary" size="mini" @click="handleAdd">快速排班</el-button>
    </el-row>
    <div class="table-content">
      <div class="table-left">
        <div class="left-son">值班人员</div>
        <div v-for="item in userList" :key="item.userId">
          <el-tooltip placement="top" class="item" effect="dark" :content="item.userName">
            <div class="split-name">
              {{ item.userName }}
            </div>
          </el-tooltip>
        </div>
      </div>
      <div ref="scrollContainer" class="table-right">
        <el-button icon="el-icon-arrow-left" class="icon-left" @click="scrollLeft('scrollContainer')" />
        <el-button icon="el-icon-arrow-right" class="icon-right" @click="scrollRight('scrollContainer')" />
        <div v-for="(item, index) in moonList" :key="index" class="moon">
          <div class="m-son" :style="{ color: item.week == '六' ? '#ea3223' : item.week == '日' ? '#ea3223' : '' }">
            <span>{{ item.time }}</span>
            <span>{{ item.week }}</span>
          </div>
          <div v-for="j in userList" :key="j.id">
            <template v-for="(k, index2) in j.watchList">
              <div
                v-if="index == index2"
                :key="index2"
                class="t-son"
                :style="{
                  color: k.workingHours == '无' ? '' : k.workingHours == '休' ? '#ea3223' : '#fff',
                  background: k.workingHours == '无' ? '' : k.workingHours == '休' ? '#efefef' : k.dutyColor,
                }">
                {{ k.workingHours }}
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import SearchForm from '@/components/HkSearchform/index.vue'
import { pageList, getSchedule, deleteItem, getTimes } from '@/api/specialProject/scheduling'

export default {
  components: {
    SearchForm,
  },
  data() {
    return {
      clickCount: 0,
      clickTimer: null,
      searchDate: undefined,
      choseId: '0',
      searchTime: '',
      queryParams: {},
      // 用户
      userList: [],
      // 日期list
      moonList: [],
      // 班组
      groups: [],
      tabArr: [],
      filterInfo: {
        fieldList: [
          { label: '关键字', type: 'input', field: 'keyword', placeholder: '请输入关键字', maxlength: 20 },
          { label: '排班时段', type: 'slot', field: 'moment' },
        ],
      },
      dictList: {
        secLevelList: [],
      },
    }
  },
  created() {
    this.getSummary()
    this.getDataList()
    this.getTimeData()
  },
  methods: {
    handleEvent(e) {
      this.searchTime = ''
    },
    // 选择日期
    changeDate(e) {
      console.log(e)
      const start = this.parseTime(this.getTimer(e[0]), '{y}-{m}-{d} {h}:{i}')
      const end = this.parseTime(this.getTimer(e[1]), '{y}-{m}-{d} ')
      const endTm = end + '23:59'
      const time = [start, endTm]
      this.queryParams.time = time
      this.searchDate = time
      this.searchTime = undefined
    },
    // 点击三个近期按钮
    changeRadio(e) {
      if (e === '近一月') {
        const start = this.parseTime(this.getMonthFirst(), '{y}-{m}-{d} {h}:{i}')
        const end = this.parseTime(this.getMonthLast(), '{y}-{m}-{d} {h}:{i}')
        const monthTime = [start, end]
        this.queryParams.time = monthTime
        this.searchDate = monthTime
      }
      if (e === '近一周') {
        console.log(this.weekTime())
        const week = this.weekTime()
        const startWeek = this.parseTime(this.getTimer(week.startTime), '{y}-{m}-{d} {h}:{i}')
        const endWeek = this.parseTime(this.getTimer(week.endTime), '{y}-{m}-{d} {h}:{i}')
        const weekTime = [startWeek, endWeek]
        this.queryParams.time = weekTime
        this.searchDate = weekTime
      }
      if (e === '近一日') {
        console.log(this.todayTime())
        const day = this.todayTime()
        const startDay = this.parseTime(this.getTimer(day.startTime), '{y}-{m}-{d} {h}:{i}')
        const endDay = this.parseTime(this.getTimer(day.endTime), '{y}-{m}-{d} {h}:{i}')
        const dayTime = [startDay, endDay]
        this.queryParams.time = dayTime
        this.searchDate = dayTime
      }
      setTimeout(() => {
        this.handleQuery()
      }, 1)
      // 本月天数
    },
    // 格式化 时间
    getTimer(item) {
      var time = new Date(item)
      var newTime =
        time.getFullYear() +
        '-' +
        (time.getMonth() + 1) +
        '-' +
        time.getDate() +
        ' ' +
        time.getHours() +
        ':' +
        time.getMinutes() +
        ':' +
        time.getSeconds()

      return newTime
    },
    // 当天时间
    todayTime(time) {
      time = time || new Date()
      return {
        startTime: new Date(time.setHours(0, 0, 0, 0)),
        endTime: new Date(time.setHours(23, 59, 59, 999)),
      }
    },
    // 本周时间
    weekTime(time) {
      time = time || new Date()
      const current = new Date(time.setHours(0, 0, 0, 0))
      const end = new Date(time.setHours(23, 59, 59, 999))
      // current是本周的第几天
      let nowDayOfWeek = current.getDay()
      if (nowDayOfWeek === 0) nowDayOfWeek = 7
      const dayNum = 1 * 24 * 60 * 60 * 1000
      // 获取本周星期一的时间，星期一作为一周的第一天
      const firstDate = new Date(current.valueOf() - (nowDayOfWeek - 1) * dayNum)
      const endDate = new Date(end.valueOf() - (nowDayOfWeek - 1) * dayNum)
      // 获取本周星期天的时间，星期天作为一周的最后一天
      const lastDate = new Date(new Date(endDate).valueOf() + 6 * dayNum)
      return {
        startTime: this.getTimer(new Date(firstDate)),
        endTime: this.getTimer(new Date(lastDate)),
      }
    },
    // 本月第一天
    getMonthFirst(time) {
      const date = time ? new Date(time) : new Date()
      const year = date.getFullYear()
      const month = date.getMonth()
      return new Date(year, month, 1) * 1
    },
    // 本月最后一天
    getMonthLast(time) {
      const date = time ? new Date(time) : new Date()
      const year = date.getFullYear()
      const month = date.getMonth()
      // day为0表示获取上一个月最后一天，所以month+1
      // 86300表示一天秒数，最后日期为 23:59:59
      return (new Date(year, month + 1, 0) / 1000 + 86399) * 1000
    },

    // 查询
    getDataList() {
      this.loading = true
      pageList(this.queryParams).then((res) => {
        this.userList = res
        this.loading = false
      })
      this.$nextTick(() => {
        this.queryParams.sort = ''
      })
    },
    // 班组
    getSummary() {
      getSchedule().then((res) => {
        this.groups = res
        var obj = {
          id: '0',
          groupName: '全部',
          // groupLogo: '#334c77'
        }
        this.groups.unshift(obj)
      })
    },
    // 月份
    getTimeData() {
      getTimes(this.queryParams).then((res) => {
        this.moonList = res
      })
    },

    edit(e) {
      return
      clearTimeout(this.clickTimer)
      this.clickCount = 0
      // 双击事件处理逻辑
      this.handleEdit(e)
      console.log('Double click event')
    },
    // 点击班组查询
    choseGroup(e) {
      this.clickCount++
      console.log(this.clickCount, 'this.clickCount')
      if (this.clickCount === 1) {
        this.clickTimer = setTimeout(() => {
          // 单击事件处理逻辑
          console.log('ddd')
          this.searchGroup(e)
          this.clickCount = 0
        }, 300)
      }
    },
    searchGroup(e) {
      if (e.id === '0') {
        this.queryParams.scheduleId = ''
      } else {
        this.queryParams.scheduleId = e.id
      }

      this.choseId = e.id
      this.handleQuery()
    },
    //  查询
    handleQuery() {
      this.queryParams.startTime = this.queryParams.time?.[0]
      this.queryParams.endTime = this.queryParams.time?.[1]
      this.queryParams.queryTime = undefined
      this.getDataList()
      this.getTimeData()
    },
    //  重置
    resetQuery() {
      this.queryParams.sort = ''
      this.choseId = '0'
      this.searchTime = ''
      this.searchDate = undefined
      this.queryParams.queryTime = undefined
      this.getTimeData()
      this.getDataList()
      this.getSummary()
    },
    // 上一页
    scrollLeft(item) {
      var time = this.moonList[0].date + ' 00:00'
      this.resetValue(item, time, '1')
    },
    // 下一页
    scrollRight(item) {
      var time = this.moonList[this.moonList.length - 1].date + ' 00:00'
      this.resetValue(item, time, '2')
    },
    // 翻页重置查询条件
    resetValue(item, time, sort) {
      this.queryParams.sort = sort
      this.queryParams.queryTime = time
      this.queryParams.startTime = undefined
      this.queryParams.endTime = undefined
      this.queryParams.time = undefined
      this.searchDate = undefined
      this.searchTime = ''
      this.getDataList()
      this.getTimeData()
      this.getSummary()
      this.$refs[item].scrollBy({
        left: -110 * 15, // 每次点击滚动的距离
        behavior: 'smooth',
      })
    },
    handleAdd() {
      this.$router.push({ path: '/specialProject/schedulingDetail', query: { title: '新增' } })
    },
    handleEdit(e) {
      this.$router.push({ path: '/specialProject/schedulingDetail', query: { title: '修改', id: e.id } })
    },
  },
}
</script>
 <style lang="scss" scoped>
#app.dark-theme {
  .app-container,
  .tab-content {
    background: transparent !important;
    color: #fff;
  }
  .tab-bg {
    background: rgba(59, 139, 255, 0.1) !important;
  }
  .sp-flex i {
    color: #4b6eef !important;
  }
}
.active-btn {
  background-color: transparent !important;
}
.split-name {
  width: 6rem;
  border: 1px solid rgba(0, 225, 228, 0.4);
  margin: 0.25rem;
  text-align: center;
  padding: 0 0.625rem;
  height: 4rem;
  line-height: 4rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-content {
  margin-top: 0.625rem;
  display: flex;
  justify-content: flex-start;
  position: relative;
  overflow: auto;
  .icon-left {
    position: absolute;
    left: 6rem;
    top: 1.75rem;
    padding: 0.25rem;
  }
  .icon-right {
    position: absolute;
    right: 0;
    top: 1.75rem;
    padding: 0.25rem;
  }
  .table-left {
    width: 6rem;
    margin-right: 0.625rem;
  }
  .table-right {
    flex: 1;
    display: flex;
    // overflow: auto;
  }
  .moon {
    flex: 1;
    min-width: 6rem;
    // width: 6rem;
    // margin: 0 .125rem;
  }
  .t-son {
    width: calc(100% - 0.5rem);
    // width: 6rem;
    border: 1px solid rgba(0, 225, 228, 0.4);
    margin: 0.25rem;
    text-align: center;
    // padding: 20px;
    height: 4rem;
    line-height: 4rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-son {
    width: calc(100% - 0.5rem);
    // width: 6rem;
    border: 1px solid rgba(0, 225, 228, 0.4);
    margin: 0.25rem;
    text-align: center;
    // padding: 20px;
    height: 4rem;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .left-son {
    width: 6rem;
    border: 1px solid rgba(0, 225, 228, 0.4);
    margin: 0.25rem;
    text-align: center;
    // padding: 20px;
    height: 4rem;
    line-height: 4rem;
    border-radius: 0.25rem;
    color: #4b6eef;
    font-size: 1rem;
  }
}
.all-group {
  margin: 0.625rem 0 0 0;
  padding: 1rem 0 0 0;
}
.searchTime {
  display: flex;
  align-items: center;
  margin-right: 20px !important;
}
.el-row {
  position: absolute;
  right: 20px;
  top: 50px;
}
.total-title {
  margin-bottom: 15px;
  margin-top: 6px;
  line-height: 24px;
}
.font-size16 {
  font-size: 16px;
}
.flex-1 {
  flex: 1;
  justify-content: space-between;
  height: 100%;
}
.font-c-blue {
  color: #4b6eef;
  font-size: 36px;
}
.mt-20 {
  margin-top: 20px;
}
::v-deep {
  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0;
    // border-right: none;
  }
  .el-range-editor.el-input__inner {
    border-left: 0;
    border-radius: 0 5px 5px 0;
  }
  .content {
    padding-bottom: 0;
  }
}
</style>
  
  